<template>
  <div>
    <!-- 循环渲染每一条评论 -->
    <div v-for="(comment, index) in comments" :key="comment.id">
      <!-- 显示评论内容 -->
      <p>{{ comment.text }}</p>
      <!-- 回复按钮，点击时调用 replyToComment 方法 -->
      <button @click="replyToComment(comment)">回复</button>
      <!-- 如果有回复，则循环渲染每一条回复 -->
      <ul v-if="comment.replies.length > 0">
        <li v-for="reply in comment.replies" :key="reply.id">
          <!-- 显示回复内容 -->
          <p>{{ reply.text }}</p>
          <!-- 回复按钮，点击时调用 replyToReply 方法 -->
          <button @click="replyToReply(reply)">回复</button>
        </li>
      </ul>
    </div>

    <!-- 如果正在回复某个评论或回复 -->
    <div v-if="replyTo">
      <!-- 输入框绑定回复内容的双向绑定 -->
      <input v-model="replyText" />
      <!-- 提交按钮，点击时调用 submitReply 方法 -->
      <button @click="submitReply">提交</button>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  setup() {
    // 创建一个响应式对象来存储评论列表
    const comments = reactive([
      { id: 1, text: "评论1", replies: [] },
      { id: 2, text: "评论2", replies: [] },
    ]);

    // 创建一个 ref 来保存当前正在回复的评论或回复
    const replyTo = ref(null);

    // 创建一个 ref 来保存回复输入框的内容
    const replyText = ref("");

    // 回复评论的方法，接收评论对象作为参数
    const replyToComment = (comment) => {
      // 设置 replyTo 的值为当前评论对象，并清空回复内容的输入框
      replyTo.value = { type: "comment", value: comment };
      replyText.value = "";
    };

    // 回复回复的方法，接收回复对象作为参数
    const replyToReply = (reply) => {
      // 设置 replyTo 的值为当前回复对象，并清空回复内容的输入框
      replyTo.value = { type: "reply", value: reply };
      replyText.value = "";
    };

    // 提交回复的方法
    const submitReply = () => {
      // 根据 replyTo 的类型进行处理
      if (replyTo.value.type === "comment") {
        // 如果是回复评论，则将回复添加到评论的 replies 数组中
        replyTo.value.value.replies.push({
          id: Date.now(),
          text: replyText.value,
        });
      } else if (replyTo.value.type === "reply") {
        // 如果是回复回复，则需要找到父级评论，并将回复添加到父级评论的 replies 数组中
        const parentComment = comments.find((comment) =>
          comment.replies.includes(replyTo.value.value)
        );
        if (parentComment) {
          parentComment.replies.push({ id: Date.now(), text: replyText.value });
        }
      }

      // 清空回复内容的输入框和 replyTo 的值
      replyText.value = "";
      replyTo.value = null;
    };

    return {
      comments,
      replyTo,
      replyText,
      replyToComment,
      replyToReply,
      submitReply,
    };
  },
};
</script>
